---
title: Changelog
description: Latest component updates and announcements.
toc: true
---

Since Plate UI is not a component library, a changelog is maintained here.

Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.

## September 2024 #14

### September 10 #14.1

- fix `floating-toolbar`: show toolbar when readOnly

## August 2024 #13


### August 27 #13.3

- Migrate to Plate 37

### August 26 #13.2

- feat `emoji-picker`: adapt shadcn themes & styles

### August 12 #13.1

- add mermaid to list of supported languages in preparation for Excalidraw improvements.

## July 2024 #12

### July 14 #12.2

- fix `cursor`: Show selection rect/caret if cursor data is undefined.

### July 12 #12.1

- `fixed-toolbar`: `top-0`

## June 2024 #11

### June 23 #11.3

- breaking change: move list of supported prismjs languages to `code-block-combobox`

### June 13 #11.2

- fix `caption`: update UI when element `caption` property changes

### June 6 #11.1

- replace `combobox` with `inline-combobox`
- remove `mention-combobox`, `emoji-combobox` and `slash-combobox`
- add `emoji-input-element`
- update `mention-input-element` and `slash-input-element` to use the new combobox
- feat `draggable`: add the data-key attribute to facilitate adding selection after the drag-and-drop operation is completed
- breaking change: Open the caption by using `CaptionButton` or pass the media element's ID through `captionActions.showCaptionId`"
- add `portalElement` prop to `floating-toolbar`

## May 2024 #10

### May 30 #10.2

- fix `draggable`: add portal to fix clipping, button type to stop form submission
- fix `editor`: increase x padding to improve drag handle visibility

### May 24 #10.1

- fix `site-header`: change zIndex to 60
- fix `fixed-toolbar`: change zIndex to 60

## April 2024 #9

### April 30 #9.3

- fix `indent-todo-marker-component`: clicking the checkbox removing the focus

### April 17 #9.2

- add `column-element`, `column-group-element`

### April 6 #9.1

- fix `combobox`: undo was crashing the editor

## February 2024 #8

### February 6 #8.2

- fix `list-element`: variant styles were missing

### February 5 #8.1

- fix `mention-element`: Mention input removed when clicking mention combobox scrollbar
  ([#2919](https://github.com/udecode/plate/issues/2919))

## January 2024 #7

### January 31 #7.5

- add `toggle-element`
- add `toggle-toolbar-button`

### January 11 #7.4

- add support for custom ui dir in `components.json`
- add support for `plate-components.json` to avoid conflict with shadcn's `components.json`

### January 9 #7.3

- `toolbar`
  - `Toolbar`: replace `items-stretch` with `items-center`
  - use `toolbarButtonVariants` instead of `toggleVariants`
  - fix `value` prop type bug
  - uses now `withTooltip`, so replace `[data-state=on]` with `aria-checked` to avoid conflicts
- `toggle`: removed as unused
- `tooltip`: add `withTooltip`, which is used by `ToolbarButton`

### January 8 #7.2

- `table-element` - TableProvider must now be rendered above TableElement

```tsx
// Before
export const TableElement = withRef<typeof PlateElement>(
  ({ className, children, ...props }, ref) => {
    // ...
  }
);

// After
export const TableElement = withHOC(
  TableProvider,
  withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {
    // ...
  })
);
```

### January 2 #7.1

- `dropdown-menu` - fix: do not exclude `className` in `DropdownMenuContent`

## December 2023 #6

### December 27 #6.3

- remove `clsx` from dependency: `class-variance-utility` already exports it as `cx`
- new dependency: `@udecode/cn`
- remove `@/lib/utils.ts` in favor of `cn` from `@udecode/cn`. Replace all imports from `@/lib/utils` with `@udecode/cn`
- import `withProps` from `@udecode/cn` instead of `@udecode/plate-common

  `
- all components using `forwardRef` are now using `withRef`. `withProps`, `withCn` and `withVariants` are also used to reduce boilerplate.
- add `withCn` to ESLint `settings.tailwindcss.callees` and `classAttributes` in your IDE settings

```tsx
// before
const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
      className
    )}
    {...props}
  />
));
Avatar.displayName = AvatarPrimitive.Root.displayName;

export { Avatar };

// after
export const Avatar = withCn(
  AvatarPrimitive.Root,
  'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full'
);
```

### December 25 #6.2

- [dialog](https://github.com/udecode/plate/pull/2824/files#diff-5f7205cdd85718b7f26cef1e746ad67d69c83703135a7e3ad1a9a09ca69c38c8)
- Plate 28, includes a few optimizations: [changes](https://github.com/udecode/plate/pull/2816/files#diff-726cd463a614f1a49228e05a2eb7ea9bc95f2e574423eb4264c6cb95eb0ac792)
  - `combobox`
  - `insert-dropdown-menu`
  - `media-popover`
  - `mode-dropdown-menu`
  - `more-dropdown-menu`
  - `table-dropdown-menu`
  - `table-element`
  - `turn-into-dropdown-menu`

### December 10 #6.1

- `image-element`: wrap the component with `withHOC(ResizableProvide, ...)`
- `media-embed-element`: wrap the component with `withHOC(ResizableProvide, ...)`

## November 2023 #5

### 28 Nov #5.1

- `table-element`
  - [feat](https://github.com/udecode/plate/pull/2733/files#diff-c5f0c4861d1d4f4e3551cebd8bc75888f5ab60a21a41d5da07487a6c9c79d483): merging support (plate 26)
- `table-cell-element`
  - [feat](https://github.com/udecode/plate/pull/2733/files#diff-b474b48d3e947c67296867abe2421b7dad66a8327a4e09f43402825393e3aa26): merging support (plate 26)
- `comments-popover`
  - `comment-more-dropdown`
    - [fix](https://github.com/udecode/plate/commit/cb6838962f105e30b4d6a56db2e5bda01a118b43): edit and delete comments
  - `comment-value`
    - [fix](https://github.com/udecode/plate/commit/cb6838962f105e30b4d6a56db2e5bda01a118b43#diff-9234422f7416eb31a4f9aca1d2070bf26dae1dcf92579ee4145702123b4347e2): remove `useCommentValue` (deprecated from plate 25)
- `toolbar`
  - [fix](https://github.com/udecode/plate/pull/2742/files): pressed state

## September 2023 #4

### 18 Sept #4.4

- `editor`: New component 🎉 See [Editor](https://platejs.org/docs/components/editor)
- `fixed-toolbar-buttons`, `floating-toolbar-buttons`, `mode-dropdown-menu`:
  - plate 24: rename `usePlateReadOnly` to `useEditorReadOnly`
- `code-block-element`: changes in `code-block-element.css`

### 15 Sept #4.3

- `table-element`
  - fix: typing in a table should keep the floating toolbar opened
- `floating-toolbar`:
  - fix: import
- `comment-leaf`, `link-element`
  - feat: use primary color
- block selection:
  - add this class to `body`: `'[&_.slate-selected]:!bg-primary/20 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10'`

### 12 Sept #4.2

- `button`: add `whitespace-nowrap`
- `popover`: hidden when printing
- `caption`: hidden placeholder when printing
- `highlight-leaf`: highlight color is now based on the primary color

### 2 Sept #4.1

- `link-floating-toolbar`
  - [fix](https://github.com/udecode/plate/pull/2593/files#diff-bd61ef4cfdcfe9401df0307a461ac13dce507b178d8e9a7ed693cb36453e9202): props type
- `media-embed-element`
  - [fix](https://github.com/udecode/plate/pull/2593/files#diff-13ddd3e18dbdc399e507d7bb512e0f592fba062a36bca14d66d39069773617bdR54): use `align` option
- `caption`
  - fix: `style` prop

## August 2023 #3

### 19 August #3.4

- `floating-toolbar` - [changes](https://github.com/udecode/plate/pull/2585/files#diff-c3329bdae6493e8868acb88f985b2929109dae7a04d756359346f0c614913766):
  - feat: `ref` support
  - refactor: using `useFloatingToolbarState`, control `floatingOptions` default value
  - fix: added `fallbackPlacements` to keep the floating in the viewport
  - br: remove the following props: `portalElement`, `floatingOptions`, `ignoreReadOnly`, `hideToolbar`
  - feat: `state` prop
- `link-floating-toolbar` - [changes](https://github.com/udecode/plate/pull/2585/files#diff-bd61ef4cfdcfe9401df0307a461ac13dce507b178d8e9a7ed693cb36453e9202):
  - refactor: control `floatingOptions` default value
  - fix: added `fallbackPlacements` to keep the floating in the viewport

### 9 August #3.3

- `mention-element` - [feat](https://github.com/udecode/plate/pull/2564/files#diff-b008c662509a2be20fae922f91462771d69105ba04e5731184427e37dc86b236): support bold, italic, underline

### 3 August #3.2

- `table-cell-element` - [feat](https://github.com/udecode/plate/pull/2557/files#diff-b474b48d3e947c67296867abe2421b7dad66a8327a4e09f43402825393e3aa26): support table cell backround styles

### 2 August #3.1

- `image-element`: [refactor](https://github.com/udecode/plate/pull/2555/files#diff-932738209da6d341356f451777ebf380ae116fd70bf73124a786ede5ca7eb77e): use `mediaResizeHandleVariants`
- `media-embed-element`: [refactor](https://github.com/udecode/plate/pull/2555/files#diff-13ddd3e18dbdc399e507d7bb512e0f592fba062a36bca14d66d39069773617bd): use `mediaResizeHandleVariants`
- `resizable` - [changes](https://github.com/udecode/plate/pull/2555/files#diff-514a5137146b81612a86bf85717ed3185ec745889f6aa5beeddf9dc8f03acae7):
  - refactor
  - feat: `mediaResizeHandleVariants`
- `table-cell-element`:
  - [fix](https://github.com/udecode/plate/pull/2555/files#diff-b474b48d3e947c67296867abe2421b7dad66a8327a4e09f43402825393e3aa26): resizable
  - [fix](https://github.com/udecode/plate/pull/2550/files#diff-b474b48d3e947c67296867abe2421b7dad66a8327a4e09f43402825393e3aa26): table selection in firefox

## July 2023 #2

### 27 July #2.2

- `caption` - new component
- `image-element`:
  - refactor: state
  - new registry deps: `caption`, `resizable`
- `media-embed-element` is now fully headless:
  - new deps: `react-lite-youtube-embed`, `react-tweet` to decrease the bundle size
  - new registry deps: `caption`, `resizable`
- `media-popover` - fix: popover closing
- `resizable` - new component
- `table-element` - fix: popover closing

### 17 July #2.1

- `comments-popover` - fix: popover not opening on new comment
- `comment-toolbar-button` - feat: hide when `myUserId` is null
- `excalidraw-element` - fix: typo

### Launch #1

Plate headless components are now available:

- [Manual Installation](https://platejs.org/docs/components/installation/manual)
- [Theming](https://platejs.org/docs/components/theming)
- [CLI](https://platejs.org/docs/components/cli)
